<template>
  <div id="analysis">
    <el-card class="echarts-card card1" body-style="padding:0">
      <!-- 头部 -->
      <div class="header">
        <div class="header-left">
          <!-- 蓝色标记 -->
          <div class="blue"></div>
          <!-- 标题 -->
          <div class="title">答题人数</div>
        </div>
        <div class="header-right">
          <!-- 右数第三个盒子 -->
          <div
            class="right-date right3"
            :class="echar1Type == 1 ? 'state-act' : ''"
            @click="setEchar1(1)"
          >
            近7日
          </div>
          <!-- 右数第二个盒子 -->
          <div
            class="right-date right2"
            :class="echar1Type == 2 ? 'state-act' : ''"
            @click="setEchar1(2)"
          >
            本月
          </div>
          <!-- 右数第一个盒子 -->
          <div
            class="right-date right1"
            :class="echar1Type == 3 ? 'state-act' : ''"
            @click="setEchar1(3)"
          >
            今年
          </div>
        </div>
      </div>
      <!-- 图表 -->
      <div class="chart1"></div>
      <!-- 底部注释 -->
      <!-- <div class="card-floot">
        <span v-if="echar1Type == 1"
          >(注：此数据为近7日每天答题总人数统计）</span
        >
        <span v-if="echar1Type == 2"
          >(注：此数据为本月每周答题总人数统计）</span
        >
        <span v-if="echar1Type == 3"
          >(注：此数据为今年每月答题总人数统计）</span
        >
      </div> -->
    </el-card>
    <el-card class="echarts-card card2" body-style="padding:0">
      <!-- 头部 -->
      <div class="header">
        <div class="header-left">
          <!-- 蓝色标记 -->
          <div class="blue"></div>
          <!-- 标题 -->
          <div class="title">报送信息有效性统计</div>
        </div>
        <div class="header-right">
          <!-- 右数第三个盒子 -->
          <div
            class="right-date right3"
            :class="echar2Type == 1 ? 'state-act' : ''"
            @click="setEchar2(1)"
          >
            近7日
          </div>
          <!-- 右数第二个盒子 -->
          <div
            class="right-date right2"
            :class="echar2Type == 2 ? 'state-act' : ''"
            @click="setEchar2(2)"
          >
            本月
          </div>
          <!-- 右数第一个盒子 -->
          <div
            class="right-date right1"
            :class="echar2Type == 3 ? 'state-act' : ''"
            @click="setEchar2(3)"
          >
            今年
          </div>
        </div>
      </div>
      <!-- 图表 -->
      <div class="chart2"></div>
      <!-- 底部注释 -->
      <!-- <div class="card-floot">
        <span v-if="echar1Type == 1"
          >(注：此数据为近7日每天答题总人数统计）</span
        >
        <span v-if="echar1Type == 2"
          >(注：此数据为本月每周答题总人数统计）</span
        >
        <span v-if="echar1Type == 3"
          >(注：此数据为今年每月答题总人数统计）</span
        >
      </div> -->
    </el-card>
    <el-card class="echarts-card card3" body-style="padding:0">
      <!-- 头部 -->
      <div class="header">
        <div class="header-left">
          <!-- 蓝色标记 -->
          <div class="blue"></div>
          <!-- 标题 -->
          <div class="title">区域报送数统计</div>
        </div>
        <div class="header-right">
          <!-- 右数第三个盒子 -->
          <div
            class="right-date right3"
            :class="echar3Type == 1 ? 'state-act' : ''"
            @click="setEchar3(1)"
          >
            近7日
          </div>
          <!-- 右数第二个盒子 -->
          <div
            class="right-date right2"
            :class="echar3Type == 2 ? 'state-act' : ''"
            @click="setEchar3(2)"
          >
            本月
          </div>
          <!-- 右数第一个盒子 -->
          <div
            class="right-date right1"
            :class="echar3Type == 3 ? 'state-act' : ''"
            @click="setEchar3(3)"
          >
            今年
          </div>
        </div>
      </div>
      <!-- 图表 -->
      <div class="chart3"></div>
      <!-- 底部注释 -->
      <!-- <div class="card-floot">
        <span v-if="echar1Type == 1"
          >(注：此数据为近7日每天答题总人数统计）</span
        >
        <span v-if="echar1Type == 2"
          >(注：此数据为本月每周答题总人数统计）</span
        >
        <span v-if="echar1Type == 3"
          >(注：此数据为今年每月答题总人数统计）</span
        >
      </div> -->
    </el-card>
    <el-card class="echarts-card card4" body-style="padding:0">
      <!-- 头部 -->
      <div class="header">
        <div class="header-left">
          <!-- 蓝色标记 -->
          <div class="blue"></div>
          <!-- 标题 -->
          <div class="title">分类项统计</div>
        </div>
        <div class="header-right">
          <!-- 右数第三个盒子 -->
          <div
            class="right-date right3"
            :class="echar4Type == 1 ? 'state-act' : ''"
            @click="setEchar4(1)"
          >
            近7日
          </div>
          <!-- 右数第二个盒子 -->
          <div
            class="right-date right2"
            :class="echar4Type == 2 ? 'state-act' : ''"
            @click="setEchar4(2)"
          >
            本月
          </div>
          <!-- 右数第一个盒子 -->
          <div
            class="right-date right1"
            :class="echar4Type == 3 ? 'state-act' : ''"
            @click="setEchar4(3)"
          >
            今年
          </div>
        </div>
      </div>
      <!-- 图表 -->
      <div class="chart4"></div>
      <!-- 底部注释 -->
      <!-- <div class="card-floot">
        <span v-if="echar1Type == 1"
          >(注：此数据为近7日每天答题总人数统计）</span
        >
        <span v-if="echar1Type == 2"
          >(注：此数据为本月每周答题总人数统计）</span
        >
        <span v-if="echar1Type == 3"
          >(注：此数据为今年每月答题总人数统计）</span
        >
      </div> -->
    </el-card>
  </div>
</template>
<script>
var elementResizeDetectorMaker = require("element-resize-detector");

export default {
  data() {
    return {
      // echartOneSection: 1,
      echar1Type: 1,
      echar2Type: 1,
      echar3Type: 1,
      echar4Type: 1,
      echartData1: [],
      echartData2: [],
      echartData3: [],
      echartData4: []
    };
  },
  mounted() {
    this.setEchar1(1);
    this.setEchar2(1);
    this.setEchar3(1);
    this.setEchar4(1);
  },
  methods: {
    setEchar1(echar1Type) {
      this.echar1Type = echar1Type;
      this.echartData1 = [];
      var chart1 = this.$echarts.init(document.querySelector(".chart1"));
      chart1.showLoading({
        text: "",
        color: "#4cbbff",
        textColor: "#4cbbff",
        maskColor: "rgba(255, 255, 255, 0.9"
      });
      // statisticsApi.getQueryDate({}, echar1Type).then(res => {
      var rotate = 0;
      // if (echar1Type === 3 && res.charDateList.length > 5) {
      // rotate = 45;
      // }
      // for (var i = 0; i < res.charDateList.length; i++) {
      //   this.echartData1[i] = [];
      //   if (echar1Type === 2) {
      //     this.echartData1[i][0] = `第${res.charDateList[i].date}周`;
      //   } else {
      //     this.echartData1[i][0] = res.charDateList[i].date;
      //   }
      //   this.echartData1[i][1] = res.charDateList[i].count;
      // }
      var that = this;
      var option = {
        grid: {
          x: 50,
          y: 50,
          x2: 60,
          y2: 50,
          borderWidth: 1
        },
        xAxis: {
          type: "category",
          name: "日期",
          // X轴是否贴边
          boundaryGap: false,
          // 不显示X轴线
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#B1C3DC"
            }
          },
          nameTextStyle: {
            color: "#666666"
          },
          axisLabel: {
            interval: 0,
            rotate: rotate,
            textStyle: {
              color: "#666666", //更改坐标轴文字颜色
              fontSize: 14 //更改坐标轴文字大小
            }
          }
        },
        yAxis: {
          type: "value",
          name: "数量：条",
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: ["RGB(247,247,247)"]
            }
          },
          nameTextStyle: {
            color: "#666666"
          },
          axisLine: {
            lineStyle: {
              color: "#B1C3DC"
            }
          },
          axisLabel: {
            textStyle: {
              color: "#666666", //更改坐标轴文字颜色
              fontSize: 14 //更改坐标轴文字大小
            }
          }
        },
        series: [
          {
            label: {
              normal: {
                show: true,
                position: "top"
              }
            },
            data: [
              ["04-05", 10],
              ["04-06", 20],
              ["04-07", 32],
              ["04-08", 48],
              ["04-09", 38],
              ["04-10", 32],
              ["04-11", 15]
            ],
            type: "line",
            itemStyle: {
              color: "RGB(129,191,255)"
            }
          }
        ]
      };
      // 关闭loding
      chart1.hideLoading();
      chart1.setOption(option);
      var erd = elementResizeDetectorMaker();
      erd.listenTo(document.getElementsByClassName("chart1"), element => {
        this.$nextTick(() => {
          chart1.resize();
        });
      });
    },
    setEchar2(echar2Type) {
      this.echar2Type = echar2Type;
      this.echartData2 = [];
      var chart2 = this.$echarts.init(document.querySelector(".chart2"));
      chart2.showLoading({
        text: "",
        color: "#4cbbff",
        textColor: "#4cbbff",
        maskColor: "rgba(255, 255, 255, 0.9"
      });
      // statisticsApi.getQueryDate({}, echar1Type).then(res => {
      var rotate = 0;
      // if (echar1Type === 3 && res.charDateList.length > 5) {
      // rotate = 45;
      // }
      // for (var i = 0; i < res.charDateList.length; i++) {
      //   this.echartData1[i] = [];
      //   if (echar1Type === 2) {
      //     this.echartData1[i][0] = `第${res.charDateList[i].date}周`;
      //   } else {
      //     this.echartData1[i][0] = res.charDateList[i].date;
      //   }
      //   this.echartData1[i][1] = res.charDateList[i].count;
      // }
      var that = this;
      var option = {
        grid: {
          x: 50,
          y: 50,
          x2: 60,
          y2: 50,
          borderWidth: 1
        },
        xAxis: {
          type: "category",
          name: "日期",
          // 不显示X轴线
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#B1C3DC"
            }
          },
          nameTextStyle: {
            color: "#666666"
          },
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisLabel: {
            interval: 0,
            rotate: rotate,
            textStyle: {
              color: "#666666", //更改坐标轴文字颜色
              fontSize: 14 //更改坐标轴文字大小
            }
          }
        },
        yAxis: {
          type: "value",
          name: "数量：条",
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: "#B1C3DC"
            }
          },
          nameTextStyle: {
            color: "#666666"
          },
          axisLine: {
            lineStyle: {
              color: "#B1C3DC"
            }
          },
          axisLabel: {
            textStyle: {
              color: "#666666", //更改坐标轴文字颜色
              fontSize: 14 //更改坐标轴文字大小
            }
          }
        },
        series: [
          {
            data: [8, 12, 10, 20, 28, 28, 10],
            type: "bar",
            barGap: 0,
            itemStyle: {
              color: "#FFB529"
            }
          },
          {
            data: [10, 15, 23, 35, 40, 20, 15],
            type: "bar",
            itemStyle: {
              color: "#409EFF"
            }
          }
        ]
      };
      // 关闭loding
      chart2.hideLoading();
      chart2.setOption(option);
      var erd = elementResizeDetectorMaker();
      erd.listenTo(document.getElementsByClassName("chart2"), element => {
        this.$nextTick(() => {
          chart2.resize();
        });
      });
      // });
    },
    setEchar3(echar3Type) {
      this.echar3Type = echar3Type;
      this.echartData3 = [];
      var chart3 = this.$echarts.init(document.querySelector(".chart3"));
      chart3.showLoading({
        text: "",
        color: "#4cbbff",
        textColor: "#4cbbff",
        maskColor: "rgba(255, 255, 255, 0.9"
      });
      // statisticsApi.getQueryDate({}, echar1Type).then(res => {
      var rotate = 0;
      // if (echar1Type === 3 && res.charDateList.length > 5) {
      // rotate = 45;
      // }
      // for (var i = 0; i < res.charDateList.length; i++) {
      //   this.echartData1[i] = [];
      //   if (echar1Type === 2) {
      //     this.echartData1[i][0] = `第${res.charDateList[i].date}周`;
      //   } else {
      //     this.echartData1[i][0] = res.charDateList[i].date;
      //   }
      //   this.echartData1[i][1] = res.charDateList[i].count;
      // }
      var that = this;
      var option = {
        grid: {
          x: 50,
          y: 50,
          x2: 60,
          y2: 50,
          borderWidth: 1
        },
        xAxis: {
          type: "category",
          name: "区域",
          // 不显示X轴线
          splitLine: {
            show: false
          },
          nameTextStyle: {
            color: "#666666"
          },
          axisLine: {
            lineStyle: {
              color: "#B1C3DC"
            }
          },
          data: ["飞行区", "航站楼", "公共区"],
          axisLabel: {
            interval: 0,
            rotate: rotate,
            textStyle: {
              color: "#666666", //更改坐标轴文字颜色
              fontSize: 14 //更改坐标轴文字大小
            }
          }
        },
        yAxis: {
          type: "value",
          name: "数量：条",
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: "#B1C3DC"
            }
          },
          nameTextStyle: {
            color: "#666666"
          },
          axisLine: {
            lineStyle: {
              color: "#B1C3DC"
            }
          },
          axisLabel: {
            textStyle: {
              color: "#666666", //更改坐标轴文字颜色
              fontSize: 14 //更改坐标轴文字大小
            }
          }
        },
        series: [
          {
            data: [8, 12, 10, 20, 28, 28, 10],
            type: "bar",
            barWidth: 40,
            barGap: 0,
            itemStyle: {
              color: "#409EFF"
            }
          }
        ]
      };
      // 关闭loding
      chart3.hideLoading();
      chart3.setOption(option);
      var erd = elementResizeDetectorMaker();
      erd.listenTo(document.getElementsByClassName("chart3"), element => {
        this.$nextTick(() => {
          chart3.resize();
        });
      });
      // });
    },
    setEchar4(echar4Type) {
      this.echar4Type = echar4Type;
      this.echartData4 = [];
      var chart4 = this.$echarts.init(document.querySelector(".chart4"));
      chart4.showLoading({
        text: "",
        color: "#4cbbff",
        textColor: "#4cbbff",
        maskColor: "rgba(255, 255, 255, 0.9"
      });
      // statisticsApi.getQueryDate({}, echar1Type).then(res => {
      var rotate = 0;
      // if (echar1Type === 3 && res.charDateList.length > 5) {
      // rotate = 45;
      // }
      // for (var i = 0; i < res.charDateList.length; i++) {
      //   this.echartData1[i] = [];
      //   if (echar1Type === 2) {
      //     this.echartData1[i][0] = `第${res.charDateList[i].date}周`;
      //   } else {
      //     this.echartData1[i][0] = res.charDateList[i].date;
      //   }
      //   this.echartData1[i][1] = res.charDateList[i].count;
      // }
      var that = this;
      var option = {
        color: [
          "#07C160",
          "#EE6565",
          "#FFAF53",
          "#C162FB",
          "#4391FF",
          "#D1D5E5"
        ],
        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "10%",
          right: "5%",
          width: "10%"
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "75%"],
            center: ["40%", "50%"],
            avoidLabelOverlap: false,
            labelLine: {
              show: true
            },
            data: [
              { value: 1048, name: "设施设备" },
              { value: 735, name: "环境保洁" },
              { value: 580, name: "运行安全" },
              { value: 484, name: "交通秩序" },
              { value: 300, name: "食品安全" },
              { value: 500, name: "服务问题" }
            ]
          }
        ]
      };
      // 关闭loding
      chart4.hideLoading();
      chart4.setOption(option);
      var erd = elementResizeDetectorMaker();
      erd.listenTo(document.getElementsByClassName("chart4"), element => {
        this.$nextTick(() => {
          chart4.resize();
        });
      });
      // });
    }
  }
};
</script>
<style lang="scss" scoped>
#analysis {
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.echarts-card {
  width: 32.6%;
  height: 350px;
  border-radius: 4px;
  margin-bottom: 14px;
  .header {
    padding: 0 20px;
    margin-bottom: 0 !important;
    display: flex;
    justify-content: space-between;
    height: 50px;
    width: 100%;
    .header-left {
      display: flex;
      height: 100%;
      align-items: center;
      .blue {
        margin-right: 10px;
        width: 4px;
        height: 16px;
        background: rgba(64, 158, 255, 1);
      }
      .title {
        height: 17px;
        line-height: 17px;
        font-size: 16px;
        font-weight: bold;
        color: #000;
        font-family: "Microsoft YaHei UI";
      }
    }
    .header-right {
      display: flex;
      align-items: center;
      height: 100%;
      // 年月日选择按钮
      .right-date {
        margin-left: 10px;
        width: 50px;
        height: 24px;
        line-height: 24px;
        background: rgba(242, 242, 242, 1);
        border-radius: 4px;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
        &.state-act {
          background-color: rgba(64, 158, 255, 1);
          color: #fff;
        }
      }
      // 输入框
      .el-input {
        width: 250px;
        height: 30px;
        line-height: 30px;
        .el-input__inner {
          height: 30px;
          line-height: 30px;
        }
        .el-input__prefix {
          .el-input__icon {
            line-height: 30px;
          }
        }
        .el-input__suffix {
          .el-input__icon {
            line-height: 30px;
          }
        }
      }
      // 日期选择器
      .el-date-editor {
        margin-left: 20px;
        width: 250px;
        height: 30px;
        line-height: 30px;
        .el-range-input {
          font-size: 12px;
        }
        .el-input__icon {
          line-height: 25px;
        }
        .el-range-separator {
          width: 14px;
          line-height: 25px;
        }
      }
    }
  }
  .chart1 {
    margin: 0 auto;
    width: 100%;
    height: 300px;
  }
  .chart2 {
    margin: 0 auto;
    width: 100%;
    height: 300px;
  }
  .chart3 {
    margin: 0 auto;
    width: 95%;
    height: 300px;
  }
  .chart4 {
    margin: 0 auto;
    width: 100%;
    height: 300px;
  }
}
</style>
